<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>分店管理</a-breadcrumb-item>
    <a-breadcrumb-item>雇员管理</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="$refs.stAddRef.openAdd()"
    ghost
    style="margin: -30px 20px 10px 10px; font-size: 15px; float: right"
    >添加员工</a-button
  >

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为brid的插槽 -->
    <template #brid="{ text }"> 分店{{ text }} </template>
    <template #job="{ text }"> {{ roles[text] }} </template>
    <template #sex="{ text }">
      <a-tag v-if="text == true" color="blue">男</a-tag>
      <a-tag v-else color="pink">女</a-tag>
    </template>
    <template #state="{ text }">
      <a-tag v-if="text == true" color="green">在职</a-tag>
      <a-tag v-else color="orange">请假</a-tag>
    </template>
    <template #opr="{ record }">
      <a-button @click="$refs.stUpdRef.openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="execDel(record.st_id)">解雇</a-button>
      <a-divider type="vertical" />
      <a-button @click="viewDetails(record)">查看详情</a-button>
    </template>
  </a-table>

  <!-- 引入自定义组件 -->
  <staff-add ref="stAddRef" @ok="getPage(page.current)"></staff-add>
  <staff-upd ref="stUpdRef" @yes="getPage(page.current)"></staff-upd>
</template>

<script>
import { ref, reactive } from "vue";
import { get, del, tip } from "@/common";
import StaffAdd from "./StaffAdd.vue"; //导入自定义组件
import StaffUpd from "./StaffUpd.vue";

export default {
  components: {
    StaffAdd,
    StaffUpd,
  }, //使用setup函数时引入自定义组件要注册
  setup(props, { emit }) {
    // const currPage = ref("staff");

    const roles = {
      1000: "总经理",
      1100: "分店经理",
      1200: "销售管理员",
      1300: "库存管理员",
      1400: "收银员",
    };

    const columns = [
      {
        dataIndex: "br_id",
        title: "分店编号",
        align: "center",
        //slots定义插槽，即将开发者自定义的内容嵌入
        slots: {
          customRender: "brid", //定义插槽名称，即以brid为名插槽的数据插入该列位置
        },
      },
      {
        dataIndex: "st_id", //服务端数据
        title: "员工号", //表头项名称
        align: "center",
      },
      {
        dataIndex: "st_name",
        title: "姓名",
        align: "center",
      },
      {
        dataIndex: "st_sex",
        title: "性别",
        align: "center",
        slots: {
          customRender: "sex",
        },
      },
      {
        dataIndex: "ro_id",
        title: "职位",
        align: "center",
        slots: {
          customRender: "job",
        },
      },
      {
        dataIndex: "st_state",
        title: "工作状态",
        align: "center",
        slots: {
          customRender: "state",
        },
      },
      {
        key: "opr",
        title: "操作",
        align: "center",
        slots: {
          customRender: "opr",
        },
      },
    ];

    //分页处理-start
    const query = reactive({}); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 10, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["5", "10", "20", "30", "50"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/branch/staff", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };
    //分页处理-end

    //解雇
    const execDel = (st_id) => {
      del("/branch/staff/" + st_id).then((res) => {
        tip.success("解雇员工成功！");
        getPage(page.value.current);
      });
    };

    //查看详情
    const viewDetails = (rec) => {
      //向父组件发送事件, 切换到详情
      emit("toDetails", rec); //发送事件时可以带参数
    };
    return {
      // currPage,
      roles,
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      execDel,
      viewDetails,
    };
  },
};
</script>

<style scoped>
</style>